<template>
  <div style="width: 100%; height: 100%">
    <el-table
      height="100%"
      :data="records"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-svg-view-box="-10, -10, 50, 50"
      element-loading-background="rgba(122, 122, 122, 0.8)"
      @select="select"
      @select-all="selectAll"
    >
      <template #empty v-if="loading == false">
        <div class="center">
          <img src="../../assets/none.png" alt class="image" />
          <p>暂时还没有内容呢...</p>
        </div>
      </template>
      <el-table-column
        v-if="isSelection"
        :reserve-selection="true"
        :selectable="selectable"
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="100"
        fixed="left"
        align="center"
        v-if="serial"
      >
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        :label="item.label"
        :width="item.width"
        :align="item.align ? item.align : 'center'"
        v-for="(item, index) in fields"
        :key="index"
        :property="item.prop"
      >
        <template #default="scope">
          <template v-if="item.children && item.children.length">
            <el-table-column
              v-for="(column, index1) in item.children"
              :key="index1"
              :property="column.prop"
              :align="column.align ? column.align : 'center'"
              :width="column.colwidth"
              :label="column.label"
            >
            </el-table-column>
          </template>
          <span v-if="!arr.some((item1) => item1 == item.prop)">
            {{
              item.filter
                ? item.filter(scope.row[item.prop])
                : scope.row[item.prop]
            }}
          </span>
          <slot
            v-else
            :name="item.prop"
            :row="scope.row"
            :index="scope.$index"
          ></slot>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        :align="'center'"
        :width="width"
        v-if="handle"
      >
        <template v-slot="{ row, column, $index }">
          <slot
            name="operation"
            :row="row"
            :column="column"
            :$index="$index"
          ></slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-if="isPaginationShow">
      <el-pagination
        v-model:current-page="model.pageNum"
        v-model:page-size="model.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
interface dataType {
  total: number;
  model: modeltype;
  loading: boolean;
  records: any;
}
interface modeltype {
  pageNum: number;
  pageSize: number;
}
export default defineComponent({
  name: "App",
  props: {
    //表头
    fields: {
      type: Array,
      default: [],
    },
    arr: {
      type: Array,
      default: [],
    },
    //是否显示多选框
    isSelection: {
      type: Boolean,
      default: true,
    },
    //是否显示序号
    serial: {
      type: Boolean,
      default: true,
    },
    //是否显示操作栏
    handle: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: "100",
    },
    //是否显示分页
    isPaginationShow: {
      type: Boolean,
      default: true,
    },
    values: {
      type: Object,
      default: {},
    },
    api: {
      type: Function,
      default: null,
    },
  },
  setup(props: any, { emit }: any) {
    const data: dataType = reactive({
      total: 200,
      model: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      records: [],
    });
    const methods = {
      //返回值用来决定这一行的 CheckBox 是否可以勾选
      selectable(row: any, index: number) {
        // console.log(row);
        return true;
        //    emit('selectable',row,index)
      },
      //当用户手动勾选数据行的 Checkbox 时触发的事件
      select(selection: any, row: any) {
        emit("selecSelection", selection);
      },
      //当用户手动勾选全选 Checkbox 时触发的事件
      selectAll(selection: any) {
        emit("selecSelection", selection);
      },
      // 请求表格数据
      init() {
        const val = Object.assign(props.values, data.model);
        props
          .api(val)
          .then((res: any) => {
            data.records = res.list;
            data.loading = false;
            data.total = res.total;
          })
          .catch((err: any) => {
            data.loading = false;
          });
      },
      //条数改变触发
      handleSizeChange(number: number) {
        data.model.pageSize = number;
        methods.init();
      },
      //页数改变触发
      handleCurrentChange(number: number) {
        data.model.pageNum = number;
        methods.init();
      },
    };
    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.image {
  height: 150px;
}
.pagination {
  width: 100%;
  background: #fff;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>